<template>
  <div class="item-bar" @click="ItemBarClick">
    <!-- 在模板里绑定v-if要套在div里面 -->
    <div v-if="!isactive"><slot name="img"></slot></div>
    <div v-else><slot name="img-active"></slot></div>
    <div v-bind:style="activeStyle"><slot name="words"></slot></div>
  </div>
</template>
<script>
export default {
  name:"ItemBar",
  props:{
    //接收传过来得路径，确定是那个路由
    path:String,
    activeColor:{
      type:String,
      default:"red"
    }
  },
  data() {
    return {
      // isactive:false,
      
    }
  },
  computed:{
    isactive(){
      return this.$route.path.includes(this.path)
    },
    activeStyle:function(){
      return this.isactive?{color:this.activeColor}:{}
    }
  },

  methods: {
    ItemBarClick(){
      this.$router.push(this.path).catch(err => err);


    }
  },
}
</script>
<style scoped>
.item-bar {
    flex: 1;
    text-align: center;
}
.item-bar img{
  height: 24px;
  width:24px;
}

</style>